<template>
	<div class="short-video" v-if="isShortVideo">
		<div class="top-box">
			<p class="left-p">短视频·精彩看</p>
			<div class="more-box" @click='goMore()'>
				<p>更多</p>
				<Iconfont iconClass="iconfont iconyoujiantou" />
			</div>
		</div>
		<ul class="short-video-ul">
			<li v-for="v of listArray" :key="v.id" @click="linkBackPage(v.vid)">
				<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_190,w_335'" />
				<p>{{v.title}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			shortVideoArrayInfo: Object,
		},
		data() {
			return {
				isShortVideo:false,
				objInfo: null,
				listArray: [], //热门主播列表
			}
		},
		computed: {},
		created() {},
		watch: {
			shortVideoArrayInfo(old) {
				this.objInfo = this.shortVideoArrayInfo
				this.listArray = this.shortVideoArrayInfo && this.shortVideoArrayInfo.videoList.splice(0, 2);
				if(this.listArray && this.listArray.length){
					this.isShortVideo = true;
				}else{
					this.isShortVideo = false;
				}
			}
		},
		mounted() {},
		methods: {
			goMore(id, title) {
				this.$router.push({
					path: `/${this.$channel}/listComMore`,
					query: {
						id: this.objInfo.id,
						title: this.objInfo.name
					}
				})
			},
			linkBackPage(vid) {
				this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
			}
		}
	};
</script>

<style scoped="scoped">
	.iconyoujiantou{
		font-size: 24px;
	}
	.short-video-ul {
		padding: 0 30px;
		display: flex;
	}
	
	.short-video-ul li:last-child {
		flex: 1;
		margin-left: 20px;
	}
	
	.short-video-ul li img {
		width: 335px;
		height: 190px;
		border-radius: 8px 8px 8px 8px;
	}
	
	.short-video-ul li p {
		width: 335px;
		font-size: 28px;
		font-weight: 400;
		color: #3B3B3B;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
	}
	
	.more-box {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 30px;
		font-size: 27px;
		font-weight: 500;
		color: #777777;
	}
	
	.more-box p {
		font-size: 27px;
		font-weight: 400;
		color: #777777;
		margin-right: 3px;
	}
	
	.left-p {
		font-size: 35px;
		font-weight: 800;
		color: #34323F;
		margin-left: 30px;
	}
	
	.top-box {
		width: 100vw;
		height: 90px;
		display: flex;
		/*justify-content: flex-start;
		align-items: center;*/
		line-height: 90px;
		/*background: saddlebrown;*/
	}
	
	.short-video {
		width: 750px;
		height: 356px;
		/*height: 2700px;*/
		/*background: salmon;*/
	}
	
	.more-box {
		display: flex;
	}
</style>